{% extends  'layout/manage.html' %}

{% block css %}
    <style>
        .panel-default .panel-heading {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .panel-default > .panel-heading a {
            text-display: none;
        }

        .panel-default > .panel-heading span {
            padding: 0 5px;
        }


        .panel-default > .panel-heading .function .upload {
            overflow: hidden;
        }


        {#.panel-default > .panel-heading .function input {#}
        {#    opacity: 0;#}
        {#    position: absolute;#}
        {#    top: 0;#}
        {#    bottom: 0;#}
        {#    width: 76px;#}
        {#    left: -2px;#}
        {#    overflow: hidden;#}
        {#{#}
        {##}

        .upload-progress {
            position: fixed;
            right: 2px;
            bottom: 2px;
            width: 400px;
        }

        .upload-progress .progress-error{
            color: red;
        }

    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid">
        <div class="panel panel-default" style="margin-top: 20px">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <div>
                    <a href="{% url 'file' project_id=request.tracer.project.id %}">
                        <i class="fa fa-home" aria-hidden="true"></i>
                        <span>文件库</span>
                    </a>
                    {% for item in breadcrumb_list %}
                        <a href="{% url 'file' project_id=request.tracer.project.id %}?folder={{ item.id }}">
                            <i class="fa fa-caret-right" aria-hidden="true"></i>
                            <span>{{ item.name }}</span>
                        </a>
                    {% endfor %}
                </div>
                <div class="function">
                    <div style="position: relative">
                        <form method="post" enctype="multipart/form-data" id="formUploadDir">
                            {% csrf_token %}
                            <input type="file" id="fileUpload" multiple name="files">

                            <button type="button" id="uploadFiles" class="btn btn-primary btn-xs"><i
                                    class="fa fa-upload" aria-hidden="true"></i> 上传文件
                            </button>


                            {#                            <div><i class="fa fa-upload" aria-hidden="true" id="upload"></i> 上传文件</div>#}
                            {#                            <input type="file" multiple name="uploadFile" id="uploadFile">#}
                        </form>
                    </div>
                    <a href="" class="btn btn-success btn-xs" data-toggle="modal" data-target="#addModal"
                       data-whatever="新建文件夹">
                        <i class="fa fa-plus-circle" aria-hidden="true"></i> 新建文件夹
                    </a>
                </div>
            </div>

            <!-- Table -->
            <table class="table">
                <thead>
                <tr>
                    <th>名称</th>
                    <th>文件大小</th>
                    <th>更新者</th>
                    <th>更新时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for item in file_object_list %}
                    <tr>
                        <th>
                            {% if item.file_type == 1 %}
                                <i class="fa fa-file" aria-hidden="true"></i> {{ item.name }}
                            {% else %}
                                <a href="{% url 'file' project_id=request.tracer.project.id %}?folder={{ item.id }}">
                                    <i class="fa fa-folder" aria-hidden="true"></i> {{ item.name }}
                                </a>
                            {% endif %} </th>
                        <td>
                            {% if item.file_type == 1 %}
                                {{ item.file_size }}
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td>{{ item.update_user.username }}</td>
                        <td>{{ item.update_datetime }}</td>
                        <td>
                            {% if item.file_type == 2 %}
                                <a class="btn btn-default btn-xs" href="" data-toggle="modal" data-target="#addModal"
                                   data-whatever="修改文件夹" data-name="{{ item.name }}" data-fid="{{ item.id }}">
                                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                </a>
                            {% endif %}

                            <a href="" class="btn btn-danger btn-xs" data-toggle="modal" data-fid="{{ item.id }}"
                               data-target="#alertModal">
                                <i class="fa fa-trash" aria-hidden="true"></i>
                            </a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form id="form">
                        {% csrf_token %}
                        <input class="hide" type="text" name="fid" id="fid">
                        {% for field in form %}
                            <div class="form-group">
                                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                {{ field }}
                                <span class="error-msg">{{ field.errors.0 }}</span>
                            </div>
                        {% endfor %}
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button id="btnFormSubmit" type="button" class="btn btn-primary">确 定</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="alert alert-danger alert-dismissible fade in" role="alert">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4>是否确定删除？</h4>
                <p style="padding-top: 20px;padding-bottom: 20px;">
                    文件夹中包含的所有文件都会被删除。
                </p>
                <p style="text-align: right;">
                    <a href="" class="btn btn-default btn-sm" data-dismiss="modal" aria-label="close">取 消</a>
                    <button id="btnDelete" type="button" class="btn btn-danger btn-sm">确 定</button>
                </p>
            </div>

        </div>
    </div>

    <div id="uploadProgress" class="upload-progress">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <i class="fa fa-cloud-upload" aria-hidden="true"></i> 上传进度
            </div>
            <table class="table">
                <tbody id="progressList">
                <tr>
                    <td>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                                 aria-valuemax="100" style="width: 30%;">
                                30%
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                                 aria-valuemax="100" style="width: 30%;">
                                30%
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>

        </div>
    </div>

    <div class="hide">
        <table id="progressTemplate">
            <tr>
                <td>
                    <div class="name">视频</div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                             aria-valuemax="100" style="width: 0;">
                            0%
                        </div>
                    </div>
                    <div class="progress-error"></div>
                </td>
            </tr>
        </table>
    </div>
{% endblock %}

{% block js %}
    <script>
        var FOLDER_URL = '{% url 'file' project_id=request.tracer.project.id %}'
        var FILE_DELETE_URL = '{% url 'file_delete' project_id=request.tracer.project.id %}'
        var FILE_UPLOAD_URL = '{% url 'file_upload' project_id=request.tracer.project.id %}'
        $(function () {
            initAddModal();
            bindFormSubmit();
            bindDeleteSubmit();
            bindUploadFile();
        });

        function bindUploadFile() {
            $('#uploadFiles').click(function () {
                var formData = new FormData($('#formUploadDir')[0]);



                {#console.log(files)#}
                $.ajax({
                    url: FILE_UPLOAD_URL, // 确保这里的URL是正确的
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (res) {
                        if (res.status) {
                        } else {
                            alert(res.error)
                        }
                    }
                });
                /*
                var fileList = $(this)[0].files;
                console.log(fileList)
                //获取本次要上传的每个文件名称&大小
                var checkFileList = [];
                $.each(fileList, function (index, fileObject) {
                    console.log(fileObject.name);
                    //上传文件
                    checkFileList.push({'name': fileObject.name, 'size': fileObject.size, 'file': fileObject})
                });
                console.log(checkFileList)
                //把这些数据发送到django后台：django后台进行容量的校验
                $.ajax({
                    url: FILE_UPLOAD_URL,
                    type: 'POST',
                    data: JSON.stringify(checkFileList),
                    dataType: 'JSON',
                    mimeType: "multipart/form-data",
                    success: function (res) {
                        if (res.status) {
                            console.log(res)
                        } else {
                            alert(res.error)
                        }
                    }
                })*/
            })
        }

        function bindDeleteSubmit() {
            $('#btnDelete').click(function () {
                //获取要删除的那行ID
                $.ajax({
                    url: FILE_DELETE_URL,
                    type: 'GET',
                    data: {fid: $(this).attr('fid')},
                    success: function (res) {
                        if (res.status) {
                            location.href = location.href;
                        }
                    }
                })
            })
        }

        function initAddModal() {
            $('#addModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget) // Button that triggered the modal
                var recipient = button.data('whatever') // Extract info from data-* attributes
                var name = button.data('name') // Extract info from data-* attributes
                var fid = button.data('fid') // Extract info from data-* attributes
                var modal = $(this)
                modal.find('.modal-title').text(recipient);

                if (fid) {
                    //编辑
                    //$('#id_name').val(name);
                    modal.find('#id_name').val(name);
                    modal.find('#fid').val(fid)
                } else {
                    //新建
                    modal.find('.error-msg').empty();
                    //document.getElementById('form').reset();
                    $('#form')[0].reset();
                }
            })

            $('#alertModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget) // Button that triggered the modal
                var fid = button.data('fid') // Extract info from data-* attributes
                $('#btnDelete').attr('fid', fid)
            })
        }

        function bindFormSubmit() {
            $('#btnFormSubmit').click(function () {
                $.ajax({
                    url: location.href,
                    type: 'POST',
                    data: $('#form').serialize(),
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            location.href = location.href
                        } else {
                            $.each(res.error, function (key, value) {
                                $('#id_' + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })
        }
    </script>
{% endblock %}